<template>
  <div class="content">
    <div class="boss">
      <div class="title">
        <span>当前城市</span>
      </div>
      <div class="dangqian">
        <ul city_ul>
          <li class="city_li border">{{ $store.state.cityC }}</li>
        </ul>
      </div>
      <div class="title_2">
        <span>热门城市</span>
      </div>
      <div class="dangqian">
        <ul city_ul>
          <li class="city_li border" v-for="item of hot" :key="item.id" @click="clik(item.name)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="diqu" v-for="(item ,key) of cities" :key="key">
        <p class="title_2 border-bottom" :ref="key">{{key}}</p>
        <ul class="qiqu_ul">
          <li class="border-bottom" v-for="initem of item" :key="initem.id" @click="clik(initem.name)">{{initem.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    hot: Array,
    cities: Object,
    gitadd: String
  },
  methods: {
    clik (city) {
      // console.log(city)
      this.$store.dispatch('citname', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrapper = document.querySelector('.content')
    this.scroll = new BScroll(wrapper, {
      tap: true,
      click: true
    })
  },
  watch: {
    gitadd () {
      // console.log(this.$refs[this.gitadd][0])
      this.scroll.scrollToElement(this.$refs[this.gitadd][0], 800)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.content
  z-index -1
  position absolute
  left 0
  top 1.76rem
  bottom 0
  right 0
  overflow hidden
  .boss
    overflow auto
    .dangqian
      width 100%
      overflow auto
    .title
      width 100%
      height 0.5rem
      line-height 0.5rem
      background-color #E4E7EA
      overflow auto
      >span
        padding-left 0.2rem
    .title_2
      width 100%
      height 0.5rem
      line-height 0.5rem
      background-color #E4E7EA
      float left
      margin-top 0.2rem
      overflow auto
      padding-left 0.2rem
    .city_ul
      width 100%
      overflow auto
      margin-top 0.2rem
      overflow auto
    .city_li
      width 2rem
      height 0.5rem
      line-height 0.5rem
      text-align center
      margin 0.2rem 0.2rem 0rem 0.2rem
      float left
    .qiqu_ul
      width 100%
      overflow auto
      >li
        width 100%
        height 0.6rem
        line-height 0.6rem
        padding-left 0.2rem
</style>
